<template>
  <div class="topCategory">
    <div class="container">
      <!-- topCategory -->
        <!-- 面包屑 -->
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <Transition name="fade-right" mode="out-in">
          <XtxBreadItem :key="topCategory.id">{{topCategory.name}}</XtxBreadItem>
        </Transition>
      </XtxBread>
      <!-- 轮播图 -->
      <XtxCarousel autoPlay style="height:500px" :sliders="sliders"></XtxCarousel>
      <!-- 所有二级分类 -->
      <div class="sub-list">
        <h3>全部分类</h3>
        <ul>
          <li v-for="cate in topCategory.children" :key="cate.id">
            <a href="javascript:;">
              <img :src="cate.picture" >
              <p>{{cate.name}}</p>
            </a>
          </li>
       </ul>
      </div>
      <!-- 分类关联商品 -->
     
      <div class="ref-goods" v-for="item in subList" :key="item.id">
        <div class="head">
          <h3>- {{item.name}} -</h3>
          <p class="tag">{{item.desc}}</p>
          <XtxMore />
        </div>
        <div class="body">
         <GoodsItem v-for="good in item.goods" :goods="good" :key="good.id"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GoodsItem from './components/GoodsItem.vue'
import {findBanner} from '@/api/home'
import {findTopCategory} from '@/api/category'
import {ref,watch,computed} from 'vue'
import {useRoute} from 'vue-router'
import {useStore } from 'vuex'
export default {
  name:'TopCategory',
  components:{GoodsItem},
  setup(){
    const sliders=ref([])
    const route=useRoute()
    const store=useStore()
    // 1.轮播图
    findBanner().then(data=>{
      sliders.value=data.result
    })

    //2.顶级分类 + 面包屑 数据在vuex
    const topCategory=computed(()=>{
       let cate={}
      //根据路由ID 去 vuex  的数据查找当前ID 的分类数据
      const item =store.state.category.list.find(item=>{
        return item.id===route.params.id
      })
      if(item) cate=item
      return cate
    })
    //3.获取各个子类目下推荐商品
    const subList=ref([])
    const getSubList=()=>{
      findTopCategory(route.params.id).then(data=>{
      subList.value=data.result.children
      })
    }
    //顶级分类，侦听顶级路由ID 发生变化，重新发起请求获取数据
    watch(()=>route.params.id,(newVal)=>{
      //监听到的路由ID存在 且 是触发了顶级类目 重新发送请求
      if(newVal && `/category/${newVal}`===route.path) getSubList()
    }, { immediate: true })




    return {sliders,subList,topCategory}
  }
}
</script>

<style lang='less' scoped>
.topCategory{
  .sub-list{
    color: #666;
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    h3{
      height: 100px;
      color: #666;
      font-size: 28px;
      text-align: center;
      line-height: 100px;
      font-weight: 400;
    }
    ul{
      display: flex;
      height: 160px;
      padding:0 32px;
      flex-wrap: wrap;

      li{
        width: 160px;
        height: 160px;
        a{
          text-align: center;
          display: block;
          img{
            height: 100px;
            width: 100px;
          }
          p{
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
  }
  .ref-goods{
    position: relative;
    margin-top: 20px;
    background-color: #fff;
    .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .head{
      h3{
          height: 100px;
          color: #666;
          font-size: 28px;
          text-align: center;
          line-height: 100px;
          font-weight: normal;
      }
      .tag{
        color: #999;
        font-size: 20px;
        text-align: center;
        position: relative;
        top: -20px;
      }
    }
    .body{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 65px 30px;
     
    }
  }
}
</style>